// map.js
// 导入腾讯地图的JDK
import qqMap from '../../../utils/qqmap'
Page({
  data: {
    latitude: 0,
    longitude: 0,
    dialogVisible: false,
    markers: [
      // 设置一个出发点的标记点
      {
        latitude: 23.129465,
        longitude: 113.427963,
        // 直接用时间戳做id
        id: Date.now(),
        width: 24,
        height: 30
      }
    ],
    polyline: []
  },
  async onLoad({ id }) {
    await this.getRepairDetail(id)
    // 地图路径导航-启动
    this.initMap()
  },
  async getRepairDetail(id) {
    const { code, data } = await wx.http.get(`repair/${id}`)
    if (code !== 10000) return wx.utils.toast()
    // console.log(data)
    // 更新数据
    this.setData(data)
    console.log(data)
  },
  initMap() {
    qqMap.geocoder({
      address: '广州' + this.data.houseInfo,
      success: ({ result: { location }}) => {
        // 给其整一个标记点，并加入豪华午餐一起
        const markers = [
          ...this.data.markers,
          {
            latitude: location.lat,
            longitude: location.lng,
            // 直接用时间戳做id
            id: Date.now(),
            width: 24,
            height: 30
          }
        ]
        // 数据更新
        this.setData({
          // 拿到房间坐标，此坐标便是map的中心点
          latitude: location.lat,
          longitude: location.lng,
          // 更新markers，此时地图上会显示所有的坐标点
          markers: markers
        })
        // 现在拿到了两个坐标点了，就可以通过sdk拿到两点之间的坐标点串了
        qqMap.direction({
          from: markers[0],
          to: markers[1],
          success: ({ result: { routes }}) => {
            // 拿到压缩过的polyline
            console.log('初始数据', routes[0].polyline)
            // 解压操作
            const coors = routes[0].polyline
            for (let i = 2; i < coors.length; i++) {
              coors[i] = coors[i - 2] + coors[i] / 1000000
            }
            console.log('解析之后', coors)
            // 给坐标对设置一个容器, 命名用map中的经纬度数组属性名points
            const points = []
            // 将polyline处理成坐标对数组
            for (let i = 0; i < coors.length; i += 2) {
              points.push({ latitude: coors[i], longitude: coors[i + 1] })
            }
            console.log('处理之后的经纬度数组', points)
            // 更新数据
            this.setData({
              polyline: [{
                points,
                color: '#5591af',
                width: 5
              }]
            })
          }
        })
      },
      // 失败后
      fail: (err) => { console.log('失败', err) }
    })
  },
  // 点击取消报修，打开弹框
  openDialogLayer() {
    this.setData({ dialogVisible: true })
  },

  dialogClose({ detail }) {
    detail === 'confirm' && this.cancelRepair()
  },
  async cancelRepair() {
    const { code } = await wx.http.put(`cancel/repaire/${this.data.id}`)
    if (code !== 10000) return wx.utils.toast('取消失败，请稍后重试')
    // 成功则返回到列表页
    wx.navigateBack()
  },
  // 修改报修
  goForm() {
    wx.navigateTo({
      url: `../form/index?id=${this.data.id}`
    })
  }

})
